<template>
  <div>
    <h1 style="float: left;width:1600px;margin-bottom: 20px;color:blue;height: 30px;background: palevioletred;border-radius: 20px">贷款数据</h1>
    <el-table
        :data="BorrowerData"
        style="width: 100%"
        :row-class-name="tableRowClassName">
      <el-table-column
          prop="price"
          label="贷款金额"
          width="180">
      </el-table-column>

      <el-table-column
          prop="loanperiods"
          label="贷款期数">
      </el-table-column>
      <el-table-column
          prop="repaymentType"
          label="还款方式">
      </el-table-column>
      <el-table-column
          prop="purpose"
          label="贷款用途">
      </el-table-column>
      <el-table-column
          prop="annual"
          label="年利率">
      </el-table-column>
      <el-table-column
          prop="states"
          label="审核状态">
        <template slot-scope="scope">
          <p v-if="scope.row.states==0">待审核</p>
          <p v-if="scope.row.states==1">已审核</p>
        </template>
      </el-table-column>
      <el-table-column
          prop="createTime"
          :formatter="dateForma"
          label="创建时间">
      </el-table-column>
      <el-table-column
          prop="startTime"
          :formatter="dateForma"
          label="生效时间">
      </el-table-column>
    </el-table>


<!-- 还款信息-->
    <h1 style="float: left;width:1600px;margin-bottom: 20px;color:blue;height: 30px;background:yellowgreen;border-radius: 20px">还款计化详情</h1>
<!--提前结清,部分还款-->
    <div id="d3" v-if="RepaymentTable.length>0">
      <el-button id="d31" style="margin-right: 20px;background:mediumblue;width: 100px;float: left" type="text"
      @click="JieQing()">提前结清</el-button>
      <el-button id="d32" style="margin-right: 15px;background:mediumblue;width: 100px;float: left" type="text"
      @click="BuFeng">部分还款</el-button>
    </div>

<!--提箱文案-->
    <div v-show="isTi">
      <el-alert
          title="您已成功提交还款！！"
          type="success"
      style="color:blue;;font-size: 28px;margin-left: 1000px;width: 500px">
      </el-alert>
    </div>
<!-- 还款计化-->
    <div>
    <el-table
        :data="RepaymentTable"
        style="width: 100%"
        :row-class-name="tableRowClassName">
      <el-table-column
          prop="periods"
          label="还款期数"
          width="180">
      </el-table-column>
      <el-table-column
          prop="repayTime"
          :formatter="dateForma"
          label="还款时间">
      </el-table-column>
      <el-table-column
          prop="capital"
          label="还款本金(元)">
      </el-table-column>
      <el-table-column
          prop="accrual"
          label="还款利息(元)">
      </el-table-column>
      <el-table-column
          prop="states"
          label="还款状态">
        <template slot-scope="scope">
          <p v-if="scope.row.states==0">未还款</p>
          <p v-if="scope.row.states==1">已还款</p>
        </template>
      </el-table-column>
      <el-table-column
          prop="overdue"
          label="逾期还款">
        <template slot-scope="scope">
          <p v-if="scope.row.overdue==0">否</p>
          <p v-if="scope.row.overdue==1">是</p>
        </template>
      </el-table-column>
      <el-table-column
          prop="sumMoney"
          label="已还金额">
      </el-table-column>
      <el-table-column
          label="操作">
        <template slot-scope="scope">
          <button style="width: 50px;height: 30px;background:blueviolet;color: #f0f9eb;border: none;border-radius: 15px" @click="repayment(scope)">
            还款</button>
        </template>
      </el-table-column>

    </el-table>
    </div>

    <!--提前结清-->
    <div  v-show="isTrue1" style="margin-right:80px">
      <h1 style="float: left;width:1600px;margin-bottom: 20px;color:blue;height: 30px;background:palegoldenrod;border-radius: 20px">提前结清数据</h1>
      <!-- 还款计化-->
      <div>
        <el-table
            :data="JieQingData"
            style="width: 100%"
            :row-class-name="tableRowClassName">
          <el-table-column
              prop="periods"
              label="还款期数"
              width="180">
          </el-table-column>
          <el-table-column
              prop="repayTime"
              :formatter="dateForma"
              label="还款时间">
          </el-table-column>
          <el-table-column
              prop="capital"
              label="还款本金(元)">
          </el-table-column>
          <el-table-column
              prop="accrual"
              label="还款利息(元)">
          </el-table-column>
          <el-table-column
              prop="states"
              label="还款状态">
            <template slot-scope="scope">
              <p v-if="scope.row.states==0">未还款</p>
              <p v-if="scope.row.states==1">已还款</p>
            </template>
          </el-table-column>
          <el-table-column
              prop="overdue"
              label="逾期还款">
            <template slot-scope="scope">
              <p v-if="scope.row.overdue==0">否</p>
              <p v-if="scope.row.overdue==1">是</p>
            </template>
          </el-table-column>
          <el-table-column
              prop="sumMoney"
              label="已还金额">
          </el-table-column>
          <el-table-column
              prop="discpor"
              label="还款描述">
          </el-table-column>
          <el-table-column
              label="操作">
            <template slot-scope="scope">
              <p v-if="scope.row.states==0">
                <button style="width: 50px;height: 30px;background:blueviolet;color: #f0f9eb;border: none;border-radius: 15px" @click="Clear(scope)">
                  结清</button>
              </p>
            </template>
          </el-table-column>

        </el-table>
      </div>
    </div>

<!-- 部分还款-->
    <el-dialog title="部分还款" :visible.sync="dialogFormVisible">
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="还款金额">
          <el-input v-model="form.money" placeholder="请输入还款金额"></el-input>
        </el-form-item><br>
        <el-form-item label="手机号">
          <el-input v-model="form.phone" placeholder="请输入手机号"></el-input>
        </el-form-item><br>
        <el-form-item label="验证码">
          <el-input v-model="form.code" placeholder="请输入验证码"></el-input>
        </el-form-item><br>
        <el-form-item>
          <el-button type="primary" @click="addOrUpdate">提交</el-button>
          <el-button type="primary" @click="queXiao">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
import moment from "moment";

export default {
  data() {
    return {
      flg:'',
      isTi:false,
      isTrue1:false,
      RepaymentTable:[],
      JieQingData:[],
      BorrowerData:[],
      borrower:{
        borrowId:this.$route.query.borrowId
      },
      logo: require('@/assets/222.png'),
      dialogFormVisible: false,
      form: {
        money: 0,
        phone:'',
        code:''
      },
      userId:1,
      formLabelWidth: '120px',
      routerStatus:this.$route.query.routerStatus,
    }
  },
  created() {
    if(this.routerStatus==1){
      this.getUserByBorrowId()
    }else{
      this.list()
    }
  },
  methods: {
    list(){
      // eslint-disable-next-line no-unused-vars
      this.$http.get("/repayment/getByBorrowId?borrowId="+this.borrower.borrowId+"&states=0").then( res=>{
        console.log(res.data.data)
        this.RepaymentTable=res.data.data
      }),
      this.$http.get("/borrower/getByBorrowId?borrowId="+this.borrower.borrowId).then( res=>{
        console.log(res.data)
        this.borrower=res.data.data
        this.BorrowerData.push(this.borrower)
      })
    },
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    },
    dateForma:function(row,column){

      var date = row[column.property];

      if(date == undefined){return ''};

      return moment(date).format("YYYY-MM-DD HH:mm:ss")

    },
    //还款 判断是否是提前还款
    repayment(scope){
      let date=new Date()
      let date1=new Date(scope.row.repayTime)
      let date2=new Date(this.borrower.startTime)
      //判断还款方式
      if(this.borrower.repaymentType =='每月还息一次还本'){
        if(date2.getTime()< date.getTime() && date.getTime() <date1.getTime()){
           alert("提前还款")
          //修改还款状态
          this.$http.get("/repayment/getByRepayId?repayId="+scope.row.repayId+"&overdue=-1&borrowId="+this.borrower.borrowId).then(res=>{
            console.log(res.data)
            if(res.data.statusCode==2000){
              location.reload()
              this.isTi=true
            }
          })
        }
        if(date1.getTime()==date.getTime()){
          alert("正常还款")
          //修改还款状态
          this.$http.get("/repayment/getByRepayId?repayId="+scope.row.repayId+"&overdue=0&borrowId="+this.borrower.borrowId).then(res=>{
            console.log(res.data)
              if(res.data.statusCode==2000){
                location.reload()
                 this.isTi=true
              }
          })

        }
        if(date.getTime()>date1.getTime()){
          alert("逾期还款,按照1个点计算逾期还款利息")
          //修改还款状态
          this.$http.get("/repayment/getByRepayId?repayId="+scope.row.repayId+"&overdue=1&borrowId="+this.borrower.borrowId).then(res=>{
            console.log(res.data)
            if(res.data.statusCode==2000){
              location.reload()
              this.isTi=true
            }
          })

        }
      }
      //判断还款方式
      if(this.borrower.repaymentType =='等额本息'){
        if(date2.getTime()< date.getTime() && date.getTime() <date1.getTime()){
          alert("每月提前还款")
          //修改还款状态
          this.$http.get("/repayment/getByRepayId?repayId="+scope.row.repayId+"&overdue=-1&borrowId="+this.borrower.borrowId).then(res=>{
            console.log(res.data)
            if(res.data.statusCode==2000){
              location.reload()
              this.isTi=true
            }
          })

        }
        if(date1.getTime()==date.getTime()){
          alert("正常还款")
          //修改还款状态
          this.$http.get("/repayment/getByRepayId?repayId="+scope.row.repayId+"&overdue=0&borrowId="+this.borrower.borrowId).then(res=>{
            console.log(res.data)
            if(res.data.statusCode==2000){
              location.reload()
              this.isTi=true
            }
          })
        }
        if(date.getTime()>date1.getTime()){
          alert("逾期还款,罚息=逾期本金*逾期天数*日利率*150%")
          //修改还款状态
          this.$http.get("/repayment/getByRepayId?repayId="+scope.row.repayId+"&overdue=1&borrowId="+this.borrower.borrowId).then(res=>{
            console.log(res.data)
            if(res.data.statusCode==2000){
              location.reload()
              this.isTi=true
            }
          })
        }
      }

    },
    //提前结清
    JieQing(){
      this.isTrue1=true
      this.$http.get("/repayment/getByBorrowId?borrowId="+this.borrower.borrowId+"&states=1").then( res=>{
        console.log(res.data.data)
        this.JieQingData=res.data.data
      })
    },
    //部分还款
    BuFeng(){
      this.isTrue1=false
      if(this.borrower.repaymentType =='每月还息一次还本'){
        this.dialogFormVisible=true
      }
      if(this.borrower.repaymentType =='等额本息'){

      }

    },
    //结清
    Clear(scope){
      alert("提前结清会按照规定付剩下本金3%的手续费息！！");
      console.log(scope)
      this.$http.get("/repayment/updateByBorrowId?borrowId="+this.borrower.borrowId+"&states=1").then( res=>{
        console.log(res.data.data)
        location.reload()

      })

    },
    //提交金额
    addOrUpdate(){
      this.dialogFormVisible=false
      this.flg=true
      //判断还款方式
      if(this.borrower.repaymentType =='每月还息一次还本'){
          //提交数据生成新数据
          this.$http.post("/repayment/saveBuFen",{
             borrow: this.borrower,
             userId:1,
             forms:this.form
          }).then(res=>{
              if(res.data.statusCode==2000){
                alert("重新生成还款计划成功");
                location.reload()
              }
          })
      }
      if(this.borrower.repaymentType =='等额本息'){
           alert("暂时不支持")
      }
    },
    //取消部分还款
    queXiao(){
      this.flg=true
      this.dialogFormVisible=false
    },
    getUserByBorrowId(){
      this.$http.get('/repayment/getUserByBorrowId?userId='+this.userId).then(res=>{
        this.RepaymentTable = res.data.data
      })
    }
  }
}
</script>

<style scoped>
#d1{
  width: 1350px;
  height: 200px;
  background-color: aquamarine;
  margin-left: 160px;
  margin-top: 10px;
  padding-top: 50px;
  border-radius: 10px;
}
#dd1{
  width: 150px;
  height: 25px;
  background-color: red;
  padding-top: 5px;
  border-radius: 10px;
  float: left;
}
#ddd1{
  width: 150px;
  height: 25px;
  font-size: 28px;
  border-radius: 10px;
  float: left;
  color: red;
}
#ddd2{
  width: 150px;
  height: 25px;
  padding-top: 10px;
  border-radius: 10px;
  float: left;
  color: #2c3e50;
  text-decoration: line-through;
}
#ddd3{
  margin-top: 30px;
  width: 250px;
  float: left;
  color: #2c3e50;
}

#b1{
  width: 150px;
  height: 70px;
  background-color: brown;
  margin-right: 50px;
  border-radius: 15px;
  font-size: 20px;
  color: aliceblue;
  float: right;
  margin-top: 20px;

}

#b2{
  width: 150px;
  height: 70px;
  background-color: blue;
  margin-right: 50px;
  border-radius: 15px;
  font-size: 20px;
  color: aliceblue;
  float: right;
  margin-top: 20px;
}
#d3{
  margin-top: 30px;
  width: 1000px;
  height: 70px;
  margin-bottom: 50px;
}
#d31:hover{
  border-bottom: 3px solid red;

}
#d32:hover{
  border-bottom: 3px solid red;
}
#d33:hover{
  border-bottom: 3px solid red;
}
#d34:hover{
  border-bottom: 3px solid red;
}
#d35:hover{
  border-bottom: 3px solid red;
}
#d36:hover{
  border-bottom: 3px solid red;
}
</style>
